<template>
  <div class="parent" v-if="isShow">
    <iframe
        id="myLoading"
        class="loading"
        :class="{ 'loading-animate': showAnimate }"
        frameborder="0"
        :src="url"
    >
    </iframe>
  </div>
</template>

<script setup name="Loading">
import {onMounted, onUnmounted, ref, watch} from "vue";
import {useFantasyStore} from "../../store";

const url = ref('')
const showAnimate = ref(false)
url.value = import.meta.env.VITE_APP_LOAD

const isShow = ref(true)
const fantasy3DStore = useFantasyStore()
watch(() => fantasy3DStore.$state.mapStatus, (newValue, oldValue) => {
  if (newValue) {
    setTimeout(() => {
      showAnimate.value = true
      isShow.value = false;
    }, 2500);
  }
});

onMounted(() => {
});

onUnmounted(() => {

});
</script>

<style scoped>
iframe, iframe >html {
  width: 100%;
  height: 100%;
}
.parent {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.loading {
  width: 100%;
  height: 100%;
}

.loading-animate {
  animation: fadeOut 1s ease-in-out forwards;
  transform-origin: center center;
}
@keyframes fadeOut {
  0% { opacity: 0.5; transform: scale(1) rotate(0deg); }
  25% { opacity: 0.3; transform: scale(0.3) rotate(90deg); }
  50% { opacity: 0.1; transform: scale(0.1) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

</style>
